<template functional>
  <a-sub-menu :key="props.menuInfo.path">
    <template v-slot:title>
      <a-icon v-if="props.menuInfo.meta && props.menuInfo.meta.icon" :type="props.menuInfo.meta.icon" />
      <span>{{ props.menuInfo.title || (props.menuInfo.meta && props.menuInfo.meta.title) }}</span>
    </template>
    <template v-for="item in props.menuInfo.children">
      <sider-menu-item v-if="item.children && item.children.length > 0" :key="item.path" :menu-info="item" />
      <a-menu-item v-else :key="item.path">
        <router-link :to="item.path" v-slot="{ navigate, href }" custom>
          <a v-if="/^(https?:|mailto:|tel:|\/\/)/.test(item.path)" :href="href" target="_blank">
            <span>{{ item.title || (item.meta && item.meta.title) }}</span>
          </a>
          <a v-else @click="navigate" href="javacript:void(0);">
            <span>{{ item.title || (item.meta && item.meta.title) }}</span>
          </a>
        </router-link>
      </a-menu-item>
    </template>
  </a-sub-menu>
</template>

<script>
export default {
  props: {
    menuInfo: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
